<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>type属性演示</title>
</head>
<!-- text      单行文本字段-->
<!-- password  单行文本字段，值被遮盖                                    -->
<!-- email     用于编辑 e-mail 的字段，可以对e-mail地址进行简单校验      -->
<!-- radio     单选按钮 。必须有相同的name属性值，value属性真实提交的数据，checked属性默认选中-->
<!-- checkbox  复选框。 必须有相同的name属性值，value属性真实提交的数据，checked属性默认选中-->

<!-- date            HTML5 用于输入日期的控件                年，月，日，不包括时间                                       -->
<!-- time            HTML5 用于输入时间的控件                不含时区                                                     -->
<!-- datetime-local  HTML5 用于输入日期时间的控件            不包含时区                                                   -->
<!-- number          HTML5 用于输入浮点数的控件                                                                           -->
<!-- range           HTML5 用于输入不精确值控件              max-规定最大值<br/>min-规定最小值 <br/>step-规定步进值 <br/>value-规定默认值 -->
<!-- search          HTML5 用于输入搜索字符串的单行文本字段  可以点击`x`清除内容                                          -->
<!-- tel             HTML5 用于输入电话号码的控件                                                                         -->
<!-- url             HTML5 用于编辑URL的字段                 可以校验URL地址格式                                          -->
<body>

<form action="#" method="post" autocomplete="off">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">

    <br/>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">

    <br/>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email">

    <br/>
    <label for="gender">性别：</label>
    <input type="radio" id="gender" name="gender" value="man">男
    <input type="radio"  name="gender" value="woman" checked>女

    <br/>
    <label for="hobby">爱好：</label>
    <input type="checkbox" id="hobby" name="hobby" value="eat" checked>吃饭
    <input type="checkbox"  name="hobby" value="game">游戏
    <input type="checkbox"  name="hobby" value="music">音乐

    <br/>
    <label for="brithday">生日：</label>
    <input type="date" id="brithday" name="brithday">

    <br/>
    <label for="time">当前时间：</label>
    <input type="time" id="time" name="time">

    <br/>
    <label for="insert">注册时间：</label>
    <input type="datetime-local" id="insert" name="insert">


    <br/>
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age">

    <br/>
    <label for="range">心情值（1-10）：</label>
    <input type="range" id="range" name="range" min="1" max="10" step="1" />

    <br/>
    <label for="search">可全部清除的文本：</label>
    <input type="search" id="search" name="search">

    <br/>
    <label for="tel">电话：</label>
    <input type="tel" id="tel" name="tel">

    <br/>
    <label for="url">个人网站：</label>
    <input type="url" id="url" name="url">

    <br/>
    <label for="file">文件上传：</label>
    <input type="file" id="file" name="file">

    <br/>
    <label for="hidden">隐藏信息：</label>
    <input type="hidden" id="hidden" name="hidden" value="itheima">

    <br/>
    <button type="submit">提交</button>
    <button type="submit">重置</button>



</form>
</body>
</html>